KnockoutJS এর মাধ্যমে templates তৈরি করা খুবই শক্তিশালী এবং নমনীয় উপায়, যার মাধ্যমে আপনি dynamic UI তৈরি করতে পারেন। Templates আপনাকে ডেটা-বাইন্ডিংয়ের মাধ্যমে UI উপাদানগুলোকে ডাইনামিকভাবে পরিবর্তন করতে এবং পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করতে সহায়তা করে।
KnockoutJS তে templates মূলত HTML টেমপ্লেট হিসেবে ব্যবহৃত হয়, যা foreach বা if বাইন্ডিংয়ের সাথে মিলে UI কনটেন্ট ডাইনামিকভাবে তৈরি ও আপডেট করে। এতে করে আপনি আপনার অ্যাপ্লিকেশনটির UI উন্নত এবং দক্ষভাবে কাস্টমাইজ করতে পারেন।
এখানে KnockoutJS এর মাধ্যমে Templates তৈরি করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হবে।
1. KnockoutJS Templates তৈরি করা:
KnockoutJS তে template তৈরি করা খুব সহজ। সাধারণত, HTML টেমপ্লেট তৈরি করতে <script> ট্যাগ ব্যবহার করা হয় এবং এতে type="text/html" সেট করা হয়। তারপর এই টেমপ্লেটগুলিকে data-bind="template" বাইন্ডিংয়ের মাধ্যমে ব্যবহার করা হয়।
টেমপ্লেট উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Templates</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<!-- Define a template -->
<script type="text/html" id="item-template">
<div>
<h3 data-bind="text: name"></h3>
<p data-bind="text: description"></p>
</div>
</script>
<div>
<h2>Items List</h2>
<div data-bind="foreach: items">
<div data-bind="template: { name: 'item-template', data: $data }"></div>
</div>
</div>
<script>
// ViewModel
function AppViewModel() {
this.items = ko.observableArray([
{ name: "Item 1", description: "This is the first item" },
{ name: "Item 2", description: "This is the second item" },
{ name: "Item 3", description: "This is the third item" }
]);
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
ব্যাখ্যা:
- Template Definition:
- প্রথমে
<script type="text/html" id="item-template">ট্যাগের মাধ্যমে একটি টেমপ্লেট ডিফাইন করা হয়েছে। এখানেnameএবংdescriptionনামক প্রপার্টি থেকে ডেটা ব্যাকবোন হিসেবে UI তৈরি করা হচ্ছে।
- প্রথমে
- foreach Binding:
data-bind="foreach: items"বাইন্ডিং ব্যবহার করেitemsঅ্যারে থেকে প্রতিটি আইটেমের জন্য টেমপ্লেট রেন্ডার করা হচ্ছে।- এখানে,
$dataব্যাবহার করে আপনি প্রতিটি আইটেমের ডেটাitem-templateটেমপ্লেটে পাঠাচ্ছেন।
- Template Usage:
data-bind="template: { name: 'item-template', data: $data }": এখানে টেমপ্লেটের নামitem-templateহিসেবে সেট করা হয়েছে, এবংdata: $dataএর মাধ্যমে আইটেমের ডেটা টেমপ্লেটে পাস করা হয়েছে।
2. Conditionals with Templates (Conditionally Rendering Templates):
KnockoutJS তে আপনি টেমপ্লেটগুলিকে if বা ifnot বাইন্ডিং ব্যবহার করে শর্তসাপেক্ষভাবে রেন্ডার করতে পারেন। অর্থাৎ, আপনি চাইলে নির্দিষ্ট শর্তে টেমপ্লেট দেখাতে বা লুকাতে পারবেন।
if Binding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Conditional Templates</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<!-- Define a template -->
<script type="text/html" id="user-template">
<div>
<h3 data-bind="text: name"></h3>
<p data-bind="text: email"></p>
</div>
</script>
<div>
<h2>User Information</h2>
<div data-bind="if: user">
<div data-bind="template: { name: 'user-template', data: user }"></div>
</div>
<div data-bind="ifnot: user">
<p>No user data available.</p>
</div>
</div>
<script>
// ViewModel
function AppViewModel() {
this.user = ko.observable({
name: "John Doe",
email: "john.doe@example.com"
});
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
ব্যাখ্যা:
ifandifnotBindings:ifবাইন্ডিং দিয়েuserঅবজার্ভেবল থাকা অবস্থায় টেমপ্লেট রেন্ডার করা হচ্ছে।ifnotবাইন্ডিং দিয়ে আপনি যখনuserঅবজার্ভেবল null বা undefined হবে, তখন একটি টেক্সট প্রদর্শিত হবে, যেমন "No user data available."
3. Nested Templates (Nested Template Usage):
আপনি টেমপ্লেটের মধ্যে আরও টেমপ্লেট অন্তর্ভুক্ত করে nested templates তৈরি করতে পারেন। এটি আরও জটিল ইউআই তৈরিতে সহায়তা করে এবং কোড পুনঃব্যবহারযোগ্য করে তোলে।
Nested Template উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Nested Templates</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<!-- Define Main Template -->
<script type="text/html" id="main-template">
<div>
<h2 data-bind="text: title"></h2>
<div data-bind="foreach: items">
<div data-bind="template: { name: 'nested-template', data: $data }"></div>
</div>
</div>
</script>
<!-- Define Nested Template -->
<script type="text/html" id="nested-template">
<div>
<p data-bind="text: name"></p>
<p data-bind="text: description"></p>
</div>
</script>
<div>
<div data-bind="template: { name: 'main-template', data: mainData }"></div>
</div>
<script>
// ViewModel
function AppViewModel() {
this.mainData = {
title: "Main Title",
items: [
{ name: "Item 1", description: "Description of Item 1" },
{ name: "Item 2", description: "Description of Item 2" }
]
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
ব্যাখ্যা:
- Main Template:
main-templateনামক টেমপ্লেটটিtitleএবংitemsএর উপর কাজ করে। এই টেমপ্লেটের মধ্যে অন্য একটি টেমপ্লেট (nested-template) রেন্ডার করা হচ্ছে।
- Nested Template:
nested-templateএকটি ছোট টেমপ্লেট যা items এর ডেটা প্রদর্শন করছে।
KnockoutJS এর মাধ্যমে templates ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনটি আরও ডায়নামিক, পুনঃব্যবহারযোগ্য এবং মডুলার করতে পারেন। Templates এর মাধ্যমে আপনি একটি ডেটার উপর ভিত্তি করে ভিউ তৈরি করতে পারবেন এবং শর্তসাপেক্ষে বা foreach দিয়ে ডেটা লিস্ট রেন্ডার করতে পারবেন। Nested Templates এবং Conditional Templates ব্যবহার করে আপনি আরও জটিল এবং মডুলার UI তৈরি করতে পারবেন।
এই সুবিধাগুলি KnockoutJS কে একটি শক্তিশালী লাইব্রেরি হিসেবে উপস্থাপন করে, যা ওয়েব ডেভেলপমেন্টে খুবই উপকারী।
Read more
